const DepartmentTable = {
    name: 'DepartmentTable',
    template: `
      <table>
        <thead>
        <tr>
            <th>部门编号</th>
            <th>部门名称</th>
            <th>部门负责人</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <!-- 使用v-for指令遍历departments数组，为每个部门生成一行 -->
        <tr v-for="department in departments" :key="department.id">
            <td>{{ department.id }}</td>
            <td>{{ department.name }}</td>
            <td>{{ department.manager }}</td>
            <td>
                <!-- 编辑和删除按钮，点击时触发相应的事件 -->
                <button style="margin-right: 5px" @click="$emit('edit', department)">编辑</button>
                <button @click="$emit('delete', department.id)">删除</button>
            </td>
        </tr>
        </tbody>
      </table>
    `,
    props: {
        departments: {
            type: Array,
            default: () => [],
        }
    },
    setup() {
        // 这里没有类似读者状态、类型、性别的复杂映射，所以暂不定义额外的转换函数
        return {};
    }
};